<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>图书管理系统 - 登录</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- 配置Tailwind自定义颜色和字体 -->
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						indigo: {
							50: '#eef2ff',
							100: '#e0e7ff',
							200: '#c7d2fe',
							300: '#a5b4fc',
							400: '#818cf8',
							500: '#6366f1',
							600: '#4f46e5',
							700: '#4338ca',
							800: '#3730a3',
							900: '#312e81',
						}
					},
					fontFamily: {
						inter: ['Inter', 'system-ui', 'sans-serif'],
					},
				}
			}
		}
	</script>

	<style type="text/tailwindcss">
		body{
			font-family: 'Pacifico', cursive;
		}
		@layer utilities {
			.content-auto {
				content-visibility: auto;
			}
			.login-card {
				@apply bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl;
			}
			.input-field {
				@apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-300 outline-none;
			}
			.btn-primary {
				@apply w-full bg-indigo-600 text-white font-medium py-3 px-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
			}
			.link-text {
				@apply text-indigo-600 hover:text-indigo-800 transition-colors duration-300 font-medium;
			}
		}
	</style>
</head>
<body class="font-inter bg-gradient-to-br from-indigo-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
<!-- 登录容器 -->
<div class="w-full max-w-md">
	<!-- 登录卡片 -->
	<div class="login-card">
		<!-- 顶部装饰条 -->
		<div class="h-2 bg-gradient-to-r from-indigo-500 to-indigo-700"></div>

		<!-- 登录内容 -->
		<div class="p-8">
			<!-- 标题区域 -->
			<div class="text-center mb-8">
				<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-indigo-100 text-indigo-600 mb-4">
					<i class="fa fa-book text-2xl"></i>
				</div>
				<h3 class="text-[clamp(1.5rem,3vw,1.8rem)] font-bold text-gray-800">图书管理系统</h3>
				<p class="text-gray-500 mt-1">请登录您的账号</p>
			</div>

			<!-- 登录表单 -->
			<form action="/admin/execu_login" method="post" class="space-y-5">
				<!-- 用户名输入 -->
				<div>
					<label for="adminName" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
					<div class="relative">
						<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" >
							<i class="fa fa-user text-gray-400"></i>
						</div>
						<input type="text" id="adminName" name="adminName"
							   class="input-field pl-10"
							   placeholder="请输入用户名"
							   style="margin-left: 10px"
							   required>
					</div>

				</div>

				<!-- 密码输入 -->
				<div>
					<label for="adminPwd" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
					<div class="relative">
						<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
							<i class="fa fa-lock text-gray-400"></i>
						</div>
						<input type="password" id="adminPwd" name="adminPwd"
							   class="input-field pl-10"
							   placeholder="请输入密码"
							   style="margin-left: 10px"
							   required>
					</div>
				</div>
				<span style="color: red" >#(errorInfo ??)</span>

				<!-- 登录按钮 -->
				<div>
					<button type="submit" class="btn-primary">
						<i class="fa fa-sign-in mr-2"></i>登录
					</button>
				</div>

				<!-- 注册链接 -->
				<div class="text-center pt-2">
					<a href="/admin/register" class="link-text">
						没有账号？去注册 <i class="fa fa-arrow-right ml-1"></i>
					</a>
				</div>

				<div class="text-center pt-2">
					<a href="/admin/forPwd" class="link-text">
						忘记密码？ <i class="fa fa-arrow-right ml-1"></i>
					</a>
				</div>
			</form>
		</div>
	</div>

	<!-- 页脚信息 -->
	<div class="text-center text-gray-500 text-sm mt-6">
		&copy; 2023 图书管理系统 - 版权所有
	</div>
</div>

<!-- 简单的交互效果脚本 -->
<script>
	// 为输入框添加聚焦/失焦动画效果
	const inputs = document.querySelectorAll('input');
	inputs.forEach(input => {
		input.addEventListener('focus', () => {
			input.parentElement.classList.add('scale-[1.01]');
			input.parentElement.style.transition = 'transform 0.3s ease';
		});
		input.addEventListener('blur', () => {
			input.parentElement.classList.remove('scale-[1.01]');
		});
	});
</script>
</body>
</html>

